<template>
	<view class="phone-login" :style="{height:uniscreenHeight+'px'}">
		<h3 class="login-one-title">手机号登入</h3>
		<form>
			<view class="phone-from-view">
				<text class="phonea-dds">+86</text>
				<input type="text" v-model="baseFormData.phone" maxlength="13" @input="onCount" class="phone-input" placeholder="请输入密码">
			</view>
			<view class="phone-from-view" v-if="isphoneInfo">
				<input type="text" v-model="baseFormData.code" class="phone-input-code" placeholder="请输入验证码">
				<text class="phonea_codes">{{time}}s</text>
			</view>
		</form>
		<button v-if="!isphoneInfo" :disabled="!PhoneCodeinfo"  @click="getPhoneCode()" class="baseFormsubmit">获取验证码</button>
		<button v-if="isphoneInfo" @click="submit()" class="baseFormsubmit">用户登入</button>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	//登入 api 接口
	import { userlogin, getphonecode, phoneLong} from "@/api/UserApi.js"
import loginVue from './login.vue';
	export default {
		data() {
			return{
				// 基础表单数据
				baseFormData: {
					phone: '',
					code: '',
				},
				isphoneInfo:false,
				PhoneCodeinfo: false,
				//倒计时
				time:60,
				Interval: null,
				//验证手机号
				regular: /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/
			}
		},
		methods:{
			async submit(ref) {
				const FormData = {
					"phone":this.baseFormData.phone.split(/[\t\r\f\n\s]*/g).join(''),
					"code":this.baseFormData.code
				}
				const { data } = await phoneLong(FormData)
				this.$store.commit("adduser",data)
				if(data.code == 1){
					uni.reLaunch({
						url: '/pages/index/index',
					});
				}  
			},
			onCount(event,v){
				if(this.baseFormData.phone.length == 3 || this.baseFormData.phone.length == 8){
					this.baseFormData.phone+=" "
				}
				if(this.baseFormData.phone.length == 13){
					this.PhoneCodeinfo = true
				}else{
					this.PhoneCodeinfo = false
					this.isphoneInfo = false
				}
			},
			//获取验证码
			 getPhoneCode(){
				let joinphone = this.baseFormData.phone.split(/[\t\r\f\n\s]*/g).join('');
				if(this.regular.test(joinphone)) {
					this.isphoneInfo = true
					this.Interval  = null
					//验证码 API
					getphonecode(joinphone)
					this.Interval = setInterval(() => {
						if(this.time > 0){
							this.time --
						}else{
							this.time = 60;
							this.isphoneInfo = false
							this.isyanzhengma = false
							clearInterval(this.time)
						}
					},1000)
				}
			}
		},
		
		computed: mapState({
				    // 从state中拿到数据 箭头函数可使代码更简练
				    uniscreenHeight: state => state.height,
		})
	}
</script>

<style lang="scss">
.phone-login{
	.phone-from-view{
		width: 100%;
		height: 80rpx;
		display: flex;
	    justify-content: center;
	    flex-direction: row;
	    flex-wrap: wrap;
		margin-top: 100rpx;
	}
	.phone-from-view:nth-child(1){
		margin-top: 100rpx;
	}
	.phone-from-view:nth-child(2){
		margin-top: 20rpx;
		border: none;
	}
	.phone-from-view::after{
		content: "";
		width: 80%;
		border-bottom:1px solid #eee;
	}
	.phonea-dds{
		display: inline-block;
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		position: relative;
		margin: 0 20rpx 0 40rpx;
	}
	.phonea-dds::after{
		content: "";
		width: 100rpx;
		height: 40rpx;
		position: absolute;
		top:17rpx;
		right:0;
		border-right:1px solid #eee;
	}
	.phone-input-code{
		padding-left: 20rpx;
	}
	.phone-input{
		width: 500rpx;
		height: 70rpx;
		font-size: 30rpx;
	}
	.login-one-title{
		text-align: center;
		font-size: 50rpx;
		font-weight: bolder;
		height: 100rpx;
		line-height: 100rpx;
	}
	
	.baseFormsubmit{
		width: 500rpx;
		height: 100rpx;
		border-radius: 25px;
		line-height: 100rpx;
		margin-top: 80rpx;
		background-color: #e43d33;
	}
}

</style>